<template>
  <!--扫码验证页面-->
  <div class="guibinting">

    <wv-tabs v-model="activeIndex" class="container" @click="changeData(activeIndex)">
      <wv-tab title="全部">
        <ul class="cata">
          <li v-for="item in goodsList">
            <img :src="item.coverImg | imgPathFilter" alt="" height="80" width="125y" @click="goDetail(item)">
            <ul>
              <li>{{item.goodsName}}</li>
              <li> ×{{item.goodsNum}}
                <span @click="goSaomadetail(item.accountGoodsId)"><img src="../../assets/smallsaoma.png" alt=""
                                                                       width="15">点我使用
                  <!--<p v-if="item.isVipCard==1">贵宾厅</p> <p v-else>{{item.goodsName}}</p>--></span>
              </li>
            </ul>
          </li>
        </ul>
        <ul v-if="goodsList.length<=0" class="null_content">
          <li><img src="../../assets/null.png" alt="" width="155"></li>
          <li>这里空空如也</li>
        </ul>

      </wv-tab>

      <wv-tab title="我的特权">
        <ul class="cata">
          <li v-for="item in goodsList">
            <img :src="item.coverImg | imgPathFilter" alt="" height="80" width="125">
            <ul>
              <li>{{item.goodsName}}</li>
              <li> ×{{item.goodsNum}}
                <span @click="goSaomadetail(item.accountGoodsId)"><img src="../../assets/smallsaoma.png" alt=""
                                                                       width="15">点我使用
                  <!--<p v-if="item.isVipCard==1">贵宾厅</p> <p v-else>{{item.goodsName}}</p>--></span>
              </li>
            </ul>
          </li>
        </ul>
        <ul v-if="goodsList.length<=0" class="null_content">
          <li><img src="../../assets/null.png" alt="" width="155"></li>
          <li>这里空空如也</li>
        </ul>
      </wv-tab>

      <wv-tab title="其它">
        <ul class="cata">
          <li v-for="item in goodsList">
            <img :src="item.coverImg | imgPathFilter" alt="" height="80" width="125">
            <ul>
              <li>{{item.goodsName}}</li>
              <li> ×{{item.goodsNum}}
                <span @click="goSaomadetail(item.accountGoodsId)"><img src="../../assets/smallsaoma.png" alt=""
                                                                       width="15">点我使用
                  <!--<p v-if="item.isVipCard==1">贵宾厅</p> <p v-else>{{item.goodsName}}</p>--></span>
              </li>
            </ul>
          </li>
        </ul>
        <ul v-if="goodsList.length<=0" class="null_content">
          <li><img src="../../assets/null.png" alt="" width="155"></li>
          <li>这里空空如也</li>
        </ul>
      </wv-tab>

    </wv-tabs>


    <wv-tabbar :fixed=true>
      <wv-tabbar-item to="/index">
        <img class="weui-tabbar__icon" src="../../assets/selecthome.png" slot="icon">
        主页
      </wv-tabbar-item>
      <wv-tabbar-item to="/saoma" is-on>
        <img class="weui-tabbar__icon" src="../../assets/selecttwo.png" slot="icon">
        扫码验证
      </wv-tabbar-item>
      <wv-tabbar-item to="/shangcheng">
        <img class="weui-tabbar__icon" src="../../assets/no.png" slot="icon">
        商城
      </wv-tabbar-item>
      <wv-tabbar-item to="/order">
        <img class="weui-tabbar__icon" src="../../assets/zhangdan.png" slot="icon">
        订单
      </wv-tabbar-item>
      <wv-tabbar-item to="/my">
        <img class="weui-tabbar__icon" src="../../assets/my.png" slot="icon"> 我的
      </wv-tabbar-item>
    </wv-tabbar>

  </div>
</template>

<script type="text/ecmascript-6">
  import {getCanScanGoods} from '../../../test/unit/http'

  export default {
    name: 'saoma',
    props: {},
    data() {
      return {
        activeIndex: 0,
        goodsList: []
      };
    },
    methods: {
      goDetail(item) {
        let isVipCard = item.isVipCard;
        let accountGoodsId = item.accountGoodsId;
        if (isVipCard == 1) {
          this.$router.push({path: 'huiyuandetail', query: {accountGoodsId: accountGoodsId}});
        }

      },
      goSaomadetail(accountGoodsId) {
        accountGoodsId;
        this.$router.push({path: 'saomadetail', query: {accountGoodsId: accountGoodsId}});
      },
      changeData(activeIndex) {
        let params = {};
        if (activeIndex != 0) {
          params = {isVipCard: activeIndex};
        }
        this.getCanScanGoodsData(params);
      },
      getCanScanGoodsData(params) {
        var that = this;
        getCanScanGoods(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.goodsList = res.object;
          } else {

          }
        })
      }
    },
    created() {
      this.getCanScanGoodsData({});
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .null_content {
    padding-top: 50%;

    li:nth-child(2) {
      margin: 10px 0 20px;
      color: #bababa;
      font-size: 14px;
    }
  }

  .cata {
    padding-bottom: 60px;

    > li {
      display: flex;
      position: relative;
      padding: 10px;
      border-bottom: 1px solid #eee;
      text-align: left;

      > img {
        object-fit: cover;
        border-radius: 6px;
        flex: 0 125px;
      }

      ul {
        flex: 1;
      }

      ul {
        padding-left: 10px;

        li:first-child {
          color: #1f1f1f;
          font-size: 17px;
          font-weight: 700;
          margin-bottom: 40px;
        }

        li:last-child {
          font-size: 14px;
          color: #999;

          img {
            vertical-align: middle;
            margin-right: 5px;
          }

          span {
            color: #2c92f0;
            font-weight: 700;
            position: absolute;
            right: 10px;
          }
        }
      }
    }
  }
</style>
